<script lang="ts" setup>
import type { CompletedTaskItem } from '@/api/types/workflow'
import { computed, ref } from 'vue'
import { getCompletedTaskPage, getTodoCount } from '@/api/workflow'
import { useUserStore } from '@/store/user'
import { safeAreaInsets } from '@/utils/systemInfo'
import { formatRelativeTime } from '@/utils/timeUtils'
import MonthlyDataCard from './components/MonthlyDataCard.vue'
import PendingApprovalCard from './components/PendingApprovalCard.vue'
import QuickActions from './components/QuickActions.vue'
import RecentApprovals from './components/RecentApprovals.vue'
import UserInfoHeader from './components/UserInfoHeader.vue'

defineOptions({
  name: 'Home',
})

// 使用用户store
const userStore = useUserStore()

// 计算用户姓名，优先使用真实姓名，否则使用用户名
const userName = computed(() => {
  const userInfo = userStore.userInfo?.userInfo
  return userInfo?.realname || userInfo?.username || '张三'
})

// 计算问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6)
    return '夜深了'
  if (hour < 12)
    return '早上好'
  if (hour < 14)
    return '中午好'
  if (hour < 18)
    return '下午好'
  return '晚上好'
})

definePage({
  // 使用 type: "home" 属性设置首页
  type: 'home',
  style: {
    // 'custom' 表示开启自定义导航栏
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
    backgroundColor: '#FFFFFF', // 使用白色主题背景
  },
})

// 待审批数量
const pendingCount = ref(0)

// 快捷操作按钮配置
const quickActions = [
  { id: 'pending', icon: 'alarm-bold', title: '待我审批', color: '#9370DB', bgColor: 'rgba(147, 112, 219, 0.1)', url: '/pages/list/todo', jumpType: 'switchTab' },
  { id: 'approved', icon: 'check-circle-bold', title: '我已审批', color: '#3CB371', bgColor: 'rgba(60, 179, 113, 0.1)', url: '/pages/list/approved', jumpType: 'navigateTo' },
  { id: 'initiated', icon: 'add-circle-bold', title: '我发起的', color: '#FFA500', bgColor: 'rgba(255, 165, 0, 0.1)', url: '/pages/list/initiated', jumpType: 'navigateTo' },
  { id: 'cc', icon: 'bell-off-bold', title: '抄送我的', color: '#6495ED', bgColor: 'rgba(100, 149, 237, 0.1)', url: '/pages/list/cc', jumpType: 'navigateTo' },
  { id: 'statistics', icon: 'chart-square-bold', title: '数据统计', color: '#4682B4', bgColor: 'rgba(70, 130, 180, 0.1)', url: '', jumpType: 'none' },
  { id: 'new', icon: 'document-text-bold', title: '新建审批', color: '#48D1CC', bgColor: 'rgba(72, 209, 204, 0.1)', url: '', jumpType: 'none' },
  { id: 'template', icon: 'clipboard-list-bold', title: '审批模板', color: '#87CEFA', bgColor: 'rgba(135, 206, 250, 0.1)', url: '', jumpType: 'none' },
  { id: 'more', icon: 'square-double-alt-arrow-right-bold', title: '更多', color: '#1E90FF', bgColor: 'rgba(30, 144, 255, 0.1)', url: '/pages/workbench/workbench', jumpType: 'navigateTo' },
]

// 最近审批列表
const recentApprovals = ref<Array<{
  id: string
  title: string
  applicant: string
  time: string
  status: number
  path: string
}>>([])

// 本月数据
const monthlyData = {
  totalCount: 28,
  completedCount: 23,
  pendingCount: 5,
  averageTime: '2.5h',
}

// 页面加载时的处理函数
onShow(() => {
  // 获取待办数量
  fetchPendingCount()
  // 获取最近已审批数据
  fetchRecentApprovals()
})

// 获取待办数量
async function fetchPendingCount() {
  try {
    const count = await getTodoCount()
    // 确保 count 是数字类型
    pendingCount.value = Number(count.data) || 0
  }
  catch (error) {
    console.error('获取待办数量失败:', error)
    // 出错时保持默认值 0
    pendingCount.value = 0
  }
}

// 获取最近已审批数据
async function fetchRecentApprovals() {
  try {
    const res = await getCompletedTaskPage({
      currentPage: 1,
      numPerPage: 5, // 只获取5条数据
    })

    if (res.data?.list && res.data.list.length > 0) {
      // 转换数据格式为页面所需格式
      recentApprovals.value = res.data.list.map((task: CompletedTaskItem) => {
        // 使用工具函数计算相对时间
        const timeText = formatRelativeTime(task.createTime)
        // 使用统一的路径获取函数
        const path = getProcessDetailPath(task.taskName, task.processInstanceId)
        // 根据任务状态设置对应的状态文本和颜色

        return {
          id: task.processInstanceId || '',
          title: task.taskName || '审批任务',
          applicant: task.nickname || '未知用户',
          time: timeText,
          status: Number(task.status),
          path,
        }
      })
    }
  }
  catch (error) {
    console.error('获取已审批数据失败:', error)
    // 出错时使用默认数据
    recentApprovals.value = []
  }
}

// 处理快捷操作点击
function handleQuickAction(action: typeof quickActions[0]) {
  // 根据不同操作进行页面跳转或功能调用
  console.log('快捷操作点击:', action.id)

  // 检查是否有URL且跳转类型不为none
  if (action.url && action.jumpType !== 'none') {
    // 根据跳转类型执行相应的导航
    if (action.jumpType === 'navigateTo') {
      uni.navigateTo({ url: action.url })
    }
    else if (action.jumpType === 'redirectTo') {
      uni.redirectTo({ url: action.url })
    }
    else if (action.jumpType === 'switchTab') {
      uni.switchTab({ url: action.url })
    }
    else if (action.jumpType === 'reLaunch') {
      uni.reLaunch({ url: action.url })
    }
  }
  else {
    // URL为空或跳转类型为none，提示功能正在开发中
    uni.showToast({
      title: '功能正在开发中',
      icon: 'none',
      duration: 2000,
    })
  }
}

// 处理审批项点击
function handleApprovalClick(approval: typeof recentApprovals.value[0]) {
  console.log('审批项点击:', approval.id)
  // 跳转到审批详情页
  if (approval.path) {
    uni.navigateTo({
      url: approval.path,
    })
  }
  else {
    uni.showToast({
      title: '路径不存在',
      icon: 'none',
      duration: 2000,
    })
  }
}

// 处理查看全部点击
function handleViewAll() {
  // 检查是否有已审批数据
  uni.navigateTo({
    url: '/pages/list/approved',
  })
}

// 处理待审批卡片点击
function handlePendingClick() {
  console.log('待审批卡片点击')
  // 跳转到待审批列表页
  uni.switchTab({
    url: '/pages/list/todo',
  })
}
</script>

<template>
  <view class="min-h-screen bg-[#FFFFFF] text-black" :style="{ marginTop: `${safeAreaInsets?.top + 16}px` }">
    <!-- 用户信息头部 -->
    <UserInfoHeader :user-name="userName" :greeting="greeting" />

    <!-- 待审批卡片 -->
    <PendingApprovalCard :pending-count="pendingCount" @click="handlePendingClick" />

    <!-- 快捷操作区域 -->
    <view class="mb-6">
      <QuickActions :actions="quickActions" @click="handleQuickAction" />
    </view>

    <!-- 最近审批 -->
    <RecentApprovals
      :approvals="recentApprovals"
      @item-click="handleApprovalClick"
      @view-all="handleViewAll"
    />

    <!-- 本月数据 -->
    <MonthlyDataCard :data="monthlyData" />
  </view>
</template>

<style lang="scss" scoped>
button::after {
  border: none;
}
</style>
